import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtGraphicalEffects 1.15

// 增强版图标按钮组件
Button {
    id: control
    // 修复隐式尺寸计算
    implicitWidth: Math.max(buttonWidth,
                            (layoutLoader.item ? layoutLoader.item.implicitWidth : 0) + 2 * customHorizontalPadding)

    implicitHeight: Math.max(buttonHeight,
                             (layoutLoader.item ? layoutLoader.item.implicitHeight : 0) + 2 * customVerticalPadding)

    // 可自定义属性
    property string iconSource: "" // 图标路径
    property color iconColor: "transparent" // 图标颜色
    property int iconWidth: 24 // 图标宽度
    property int iconHeight: 24 // 图标高度
    property int buttonWidth: 42 // 按钮宽度
    property int buttonHeight: 42 // 按钮高度
    property color hoverColor: "#1e90ff" // 悬停背景色
    property color downColor: "#1e90ff" // 按下背景色
    property real iconRadius: 0 // 图片圆角半径
    property string title: "" // 按钮标题
    property color titleColor: "#333333" // 标题颜色
    property int titleSize: 12 // 标题字体大小
    property bool titleBelow: false // 标题是否显示在图标下方
    property real radius: 0 // 按钮圆角半径

    // 内边距
    property real customHorizontalPadding: 8
    property real customVerticalPadding: 8

    // 映射到可写的padding属性
    leftPadding: customHorizontalPadding
    rightPadding: customHorizontalPadding
    topPadding: customVerticalPadding
    bottomPadding: customVerticalPadding

    // 背景效果
    background: Rectangle {
        anchors.fill: parent
        radius: control.radius
        color: {
            if (control.down)
                return downColor
            else if (control.hovered)
                return hoverColor
            else
                return "transparent"
        }

        // 按下时的凹下效果
        layer.enabled: control.down
        layer.effect: DropShadow {
            transparentBorder: true
            horizontalOffset: 1
            verticalOffset: 1
            radius: 2
            samples: 5
            color: "#40000000"
        }

        // 边框效果
        border.width: control.hovered || control.down ? 1 : 0
        border.color: Qt.darker(hoverColor, 1.2)
    }

    // 内容区域
    contentItem: Item {
        anchors.fill: parent
        anchors.margins: 5

        // 动态布局容器
        Loader {
            id: layoutLoader
            anchors.centerIn: parent
            sourceComponent: control.titleBelow ? verticalLayout : horizontalLayout
        }
    }

    // 垂直布局（标题在图标下方）
    Component {
        id: verticalLayout

        ColumnLayout {
            id: vertLayout
            spacing: 5
            Layout.alignment: Qt.AlignCenter

            // 图标组件 - 修复图标显示问题
            Item {
                id: iconContainer
                width: control.iconWidth
                height: control.iconHeight
                Layout.alignment: Qt.AlignCenter
                visible: control.iconSource.toString() !== ""

                // 圆角遮罩
                Rectangle {
                    id: mask
                    anchors.fill: parent
                    radius: control.iconRadius
                    visible: false
                }

                // 图标图像
                Image {
                    id: iconImage
                    anchors.fill: parent
                    source: control.iconSource
                    fillMode: Image.PreserveAspectCrop
                    visible: false
                }

                // 应用颜色覆盖
                ColorOverlay {
                    id: colorOverlay
                    anchors.fill: iconImage
                    source: iconImage
                    color: control.iconColor
                    visible: false
                }

                // 应用圆角遮罩
                OpacityMask {
                    anchors.fill: parent
                    source: colorOverlay
                    maskSource: mask
                }
            }

            // 标题组件
            Text {
                id: titleText
                text: control.title
                color: control.titleColor
                font.pixelSize: control.titleSize
                visible: control.title !== ""
                Layout.alignment: Qt.AlignCenter
            }
        }
    }

    // 水平布局（标题在图标右侧）
    Component {
        id: horizontalLayout

        RowLayout {
            id: horizLayout
            spacing: 5
            Layout.alignment: Qt.AlignCenter

            // 图标组件 - 修复图标显示问题
            Item {
                id: iconContainer
                width: control.iconWidth
                height: control.iconHeight
                visible: control.iconSource.toString() !== ""

                // 圆角遮罩
                Rectangle {
                    id: mask
                    anchors.fill: parent
                    radius: control.iconRadius
                    visible: false
                }

                // 图标图像
                Image {
                    id: iconImage
                    anchors.fill: parent
                    source: control.iconSource
                    fillMode: Image.PreserveAspectCrop
                    visible: false
                }

                // 应用颜色覆盖
                ColorOverlay {
                    id: colorOverlay
                    anchors.fill: iconImage
                    source: iconImage
                    color: control.iconColor
                    visible: false
                }

                // 应用圆角遮罩
                OpacityMask {
                    anchors.fill: parent
                    source: colorOverlay
                    maskSource: mask
                }
            }

            // 标题组件
            Text {
                id: titleText
                text: control.title
                color: control.titleColor
                font.pixelSize: control.titleSize
                visible: control.title !== ""
            }
        }
    }
}
